<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#test{
				width: 100px;
				height: 300px;
				border: 1px solid black;
				/*background: linear-gradient(red 50%,blue 50%);*/
				background: linear-gradient(red 50%,blue 0);
				/*background-size: 100% 30px;*/
			}
			#test2{
				width: 400px;
				height: 100px;
				border: 1px solid black;
				/*background: linear-gradient(red 50%,blue 50%);*/
				background: linear-gradient( to right ,red 20%,blue 0);
				background-size:  30px 100%;
			}
			#test3{
				width: 200px;
				height: 200px;
				border: 1px solid black;
				/*background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%,  #fb3 0, #fb3 75%, #58a 0);*/
				 /*background-size: 30px 30px;*/
				/*background: repeating-linear-gradient(45deg,  #fb3, #58a 30px);*/
				/*简单写法*/
				background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
				/*总结*/
				background: #58a;
				background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,                     transparent 0, transparent 30px);
				
			}
			

		</style>
	</head>
	<body>
		<div id="test"></div>
		<div id="test2"></div>
		<div id="test3"></div>
	</body>
</html>
